<template>
	<view class="container">
		<view class="comment">
			<view class="item">
				<view class="amazing-top">
					<view class="amazing-flex">
						<view class="amazing-box">
							<view class="amazing-text">
								{{statistics.amazing}}%
							</view>
						
							<view class="amazing" @tap="opentips">
								惊艳度<image class="amazing-icon"
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250312/c80892b6b707874609d0a81a8f33eede.png"
									mode=""></image>
							</view>
							<view v-if="showTips" class="tip-box">
								<view class="tip-content">
									惊艳度指购买用户对商品品质5分评估占比值
								</view>
							</view>
						</view>
						<view class="vertical-line"></view>
						<view class="amazing-main">
							<image class="main-img" v-for="(item2, index2) in 5" :key="index2"
								:src="getStarImage(index2, statistics.comment_score)" mode="widthFix" />
						</view>
					</view>
					<view class="satisfied-box">
						满意度{{statistics.comment_haopercent}}%
					</view>
				</view>
				<view class="tags-box">
					<view class="tags-box-item" v-for="(item,index) in tag_sums" :key="index"
						:style="{ background: t('color2') }">
						{{item.name}}({{item.sum}})
					</view>
				</view>
				<view class="amazing-tips">
					{{statistics.tips}}
				</view>
			</view>
			<view v-for="(item, index) in datalist" :key="index" class="item">
				<view class="f1">
					<image class="t1" :src="item.headimg" />
					<view class="t2">{{privacyNickname(item.nickname)}}</view>
					<view class="flex1"></view>
					<view class="t3">
						<image class="img" v-for="(item2,index2) in [0,1,2,3,4]" :key="index2"
							:src="'/static/img/star' + (item.score>item2?'2':'') + '.png'" />
					</view>
				</view>
				<view style="color:#777;font-size:22rpx;">{{item.createtime}}</view>
				<view class="f2">
					<text class="t1">{{item.content}}</text>
					<view class="t2">
						<block v-if="item.content_pic!=''">
							<block v-for="(itemp, index) in item.content_pic" :key="index">
								<view @tap="previewImage" :data-url="itemp" :data-urls="item.content_pic">
									<image :src="itemp" mode="widthFix" />
								</view>
							</block>
						</block>
					</view>
					<text class="t3">已购：{{item.ggname}}</text>
				</view>
				<view class="f3" v-if="item.reply_content">
					<view class="arrow"></view>
					<view class="t1">商家回复：{{item.reply_content}}</view>
				</view>
			</view>
		</view>

		<nomore v-if="nomore"></nomore>
		<nodata v-if="nodata" text="暂无评价~"></nodata>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
	var app = getApp();

	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,

				datalist: [],
				pagenum: 1,
				nomore: false,
				showTips: false,
				tag_sums: [],
				statistics: {}
			};
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getdata();
			this.getTags()
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
		},
		methods: {
			privacyNickname(nickname) {
				if (!nickname || nickname.length === 0) return '';
				return nickname.charAt(0) + '**';
			},
			getTags() {
				var that = this;
				app.get('Shop/commentlist', {
					proid: that.opt.proid,

				}, function(res) {
					that.tag_sums = res.tag_sums
					that.statistics = res.statistics
				});
			},
			opentips() {
				this.showTips = !this.showTips;
			},
			getStarImage(index, haopercent) {
				if (index < Math.floor(haopercent)) {
					// 完整星星
					return '/static/img/star2.png';
				} else if (index === Math.floor(haopercent) && haopercent % 1 !== 0) {
					// 半星
					return '/static/img/star-half.png';
				} else {
					// 灰色星星
					return '/static/img/star.png';
				}
			},
			getdata: function(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var pagenum = that.pagenum;
				that.loading = true;
				that.nodata = false;
				that.nomore = false;
				app.post('Shop/commentlist', {
					proid: that.opt.proid,
					pagenum: pagenum
				}, function(res) {
					that.loading = false;
					var data = res.data;
					if (pagenum == 1) {
						that.datalist = data;
						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded();
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}
				});
			}
		}
	};
</script>
<style>
	.container {}

	.comment {
		display: flex;
		flex-direction: column;
		padding: 10rpx 20rpx;
	}

	.comment .item {
		background-color: #fff;
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	.comment .item .f1 {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 10rpx 0;
	}

	.comment .item .f1 .t1 {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.comment .item .f1 .t2 {
		padding-left: 10rpx;
		color: #333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.comment .item .f1 .t3 {
		text-align: right;
	}

	.comment .item .f1 .t3 .img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx
	}

	.comment .item .score {
		font-size: 24rpx;
		color: #f99716;
	}

	.comment .item .score image {
		width: 140rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-bottom: 6rpx;
		margin-right: 6rpx;
	}

	.comment .item .f2 {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 10rpx 0;
	}

	.comment .item .f2 .t1 {
		color: #333;
		font-size: 28rpx;
	}

	.comment .item .f2 .t2 {
		display: flex;
		width: 100%
	}

	.comment .item .f2 .t2 image {
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx;
	}

	.comment .item .f2 .t3 {
		color: #aaa;
		font-size: 24rpx;
	}

	.comment .item .f2 .t3 {
		color: #aaa;
		font-size: 24rpx;
	}

	.comment .item .f3 {
		width: 100%;
		padding: 10rpx 0;
		position: relative
	}

	.comment .item .f3 .arrow {
		width: 16rpx;
		height: 16rpx;
		background: #eee;
		transform: rotate(45deg);
		position: absolute;
		top: 0rpx;
		left: 36rpx
	}

	.comment .item .f3 .t1 {
		width: 100%;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 22rpx;
		color: #888;
		background: #eee
	}

	.amazing-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.amazing-box {
		margin-top: 10rpx;
	}

	.amazing-text {
		font-weight: 700;
		font-size: 36rpx;
	}

	.amazing {
		display: flex;
		align-items: center;

	}

	.amazing-icon {
		width: 30rpx;
		height: 30rpx;
		margin-left: 6rpx;
	}

	.trend-box {
		border: 1px solid #eee;
		padding: 10rpx;
		display: flex;
		align-items: center;
		height: 50rpx;
		border-radius: 10rpx;
		background-color: #f9ffff;
	}

	.trend {
		width: 40rpx;
		height: 30rpx;
		margin-right: 6rpx;
	}

	.tip-box {
		position: absolute;
		top: -20rpx;
		left: 0;
		opacity: 0.9;
	}

	.tip-box::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		/* 调整三角形距离提示框的距离 */
		left: 20%;
		transform: translateX(-50%);
		/* 使三角形水平居中 */
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #595959;
		/* 三角形的颜色，和提示框背景颜色一致 */
	}

	.tip-content {
		background-color: #595959;
		padding: 10rpx;
		font-size: 24rpx;
		border-radius: 8rpx;

	}

	.amazing-main {
		display: flex;
		align-items: center;
	}

	.main-img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 8rpx;
	}

	.tags-box {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-top: 10rpx;
	}

	.tags-box-item {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.satisfied-box {
		font-size: 24rpx;
	}

	.amazing-tips {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #ADADAD;
	}
	.amazing-flex{
		display: flex;
		align-items: center;
	}
	.vertical-line {
	    width: 1px;
	    background-color: #ccc; 
	    margin: 0 20rpx; 
		height: 50rpx;
	}
</style>